<template>
  <div class="member-coupons">
    <div class="coupon-button">
      <xtx-button type="small default" @click="getMore()">领券中心</xtx-button>
      <xtx-button type="small default" @click="openExchange({})">兑换优惠券</xtx-button>
      <a href="javascript:;">优惠券使用说明</a>
    </div>
    <XtxTabs v-model="activeName" @tab-click="tabClick">
      <XtxTabsPanel v-for="item in couponsType" :key="item.name" :label="item.label" :name="item.name"></XtxTabsPanel>
    </XtxTabs>
    <div class="coupons-list">
      <div v-if="loading" class="loading"></div>
      <div class="none">优惠券列表还是空的</div>
    </div>
  </div>
  <!-- 兑换优惠券的弹窗组件 -->
  <ExchangeDialog ref="couponsCom"></ExchangeDialog>
</template>

<script>
import { couponsType } from '@/api/constant'
import { reactive, ref } from 'vue'
import ExchangeDialog from './components/coupons-exchange.vue'
import Message from '@/components/library/message'
export default {
  name: 'MemberCoupons',
  components: {
    ExchangeDialog
  },
  setup () {
    const activeName = ref('valid')
    // 点击选项卡
    const tabClick = ({ index }) => {
      reqParams.page = 1
      reqParams.couponsType = index + 1
    }
    // 查询订单参数
    const reqParams = reactive({
      page: 1,
      pageSize: 5,
      couponsType: 1
    })
    const loading = ref(false)
    // 打开兑换优惠券弹窗组件
    const couponsCom = ref(null)
    const openExchange = () => {
      // 添加 {}
      couponsCom.value.open()
    }
    const getMore = () => {
      Message({ type: 'warn', text: '领券中心正在建设中···' })
    }
    return { activeName, tabClick, couponsType, reqParams, loading, couponsCom, openExchange, getMore }
  }
}
</script>

<style lang="less" scoped>
// :deep(.xtx-tabs) {
//   width: 50%;
// }
.member-coupons {
  height: 100%;
  background: #fff;
  .coupon-button {
    height: 60px;
    position: absolute;
    right: 0;
    padding: 0 30px;
    :deep(.xtx-button) {
      border-radius: 0;
      color: @xtxColor;
      &:first-child {
        border-right: 0;
      }
      &:last-child {
        border-left: 0;
      }
    }
    a {
      color: @xtxColor;
      line-height: 60px;
      margin-left: 40px;
    }
  }
  .coupons-list {
    padding: 20px;
    min-height: 400px;
    position: relative;
    }
  .loading {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
    }
  .none {
    height: 400px;
    text-align: center;
    line-height: 400px;
    color: #999;
    }
}
</style>
